<template>
	<view>
		<!-- 使用自定义 my-search 组件 -->
		<my-search
			@handleClick="goToSearch"
			:bgColor="'#C00000'" :radius="18"></my-search>
		<!-- 滑动的最外层包裹容器盒 -->
		<view class="scroll-view-container">
			<!-- 左侧的滑动区域 -->
			<scroll-view scroll-y :style="{ height: windowHeight + 'px' }" class="left-scroll-view">
				<block
					v-for="(item,index) in cateList" :key="item.cat_id">
					<view
						@click="changeActive(index)"
						:class="['left-scroll-view-item',index === active ? 'active' : '']">{{ item.cat_name }}</view>
				</block>
			</scroll-view>
			<!-- 右侧的滑动区域 -->
			<scroll-view :scroll-top="scrollTop" scroll-y :style="{ height: windowHeight + 'px' }" class="right-scroll-view">
				<block v-for="(item,index) in secondCateList" :key="item.cat_id">
					<view class="second-cate-item">
						<!-- 二级分类标题 -->
						<view class="second-cate-title">/ {{ item.cat_name }} /</view>
						<!-- 三级分类区域 -->
						<view class="third-cate-list">
							<view
								@click="goToGoodsList(it)"
								v-for="(it,i) in secondCateList[index].children" :key="it.cat_id"
								class="third-cate-item">
								<image :src="it.cat_icon"></image>
								<text>{{ it.cat_name }}</text>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import tabbarBadge from '@/mixins/tabbar-badge';
	export default {
		methods: {
			goToSearch(){											// 处理搜索功能
				console.log('搜索')
				uni.navigateTo({
					url: '/subpkg/search/search'
				})
			},
			goToGoodsList(item){							// 处理跳转到商品列表页面
				uni.navigateTo({
					url: `/subpkg/goods_list/goods_list?cid=${item.cat_id}`
				})
			},
			changeActive(index){							// 更新 active 激活项
				this.active = index
				this.secondCateList = this.cateList[this.active].children
				// 重置滚动条纵向滚动的距离
				this.scrollTop = this.scrollTop === 1 ? 0 : 1
			},
			async getCateList() {				// 获取分类列表数据
				const { data: res } = await uni.$http.get('/api/public/v1/categories')
				// 校验是否请求成功
				if (res.meta.status !== 200) {
					return uni.$showMsg()
				}
				this.cateList = res.message
				this.secondCateList = res.message[0].children
				console.log(this.cateList,'cateList')
				console.log(this.secondCateList,'secondCateList')
				uni.$showMsg('分类列表数据请求成功')
			}
		},
		mixins: [tabbarBadge],
		data() {
			return {
				scrollTop: 0,				// 控制滚动条滚动的距离
				active: 0,					// 分类列表激活项
				secondCateList: [],	// 存储分类列表二级分类数据
				cateList: [],				// 存储分类列表一级分类数据
				windowHeight: 0,		// 记录当前屏幕的可用高度
			}
		},
		onLoad(){		// 生命周期函数 ==> 页面加载完毕
			const systemInfo = uni.getSystemInfoSync()
			// console.log(systemInfo)
			// 滑动区域的高度 = 可视高度 - 搜索区域的高度
			this.windowHeight = systemInfo.windowHeight - 50
			
			// 获取数据
			this.getCateList()
		}
	}
</script>

<style lang="scss">
.scroll-view-container {
	display: flex;
	
	.left-scroll-view {
		width: 120px;
		
		.left-scroll-view-item {
			background-color: #f7f7f7;
			line-height: 60px;
			text-align: center;
			font-size: 12px;
			
			&.active {
				position: relative;
				background-color: #fff;
				
				&:before {
					position: absolute;
					top: 50%;
					left: 0;
					transform: translateY(-50%);
					content: ' ';
					display: block;
					width: 3px;
					height: 30px;
					background-color: #f00;
				}
			}
		}
	}
	.right-scroll-view {
		.second-cate-title{
			padding: 15px 0;
			font-size: 12px;
			font-weight: 700;
			text-align: center;
		}
		.third-cate-list {
			display: flex;
			flex-wrap: wrap;
			
			.third-cate-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 10px;
				width: 33.33%;
				
				image {
					width: 60px;
					height: 60px;
				}
				text {
					font-size: 10px;
				}
			}
		}
	}
}
</style>
